<template>
  <div style="display: flex;align-items: center;margin-left: 60px">
    <el-input v-model="doi" style="width: 500px;margin-right: 10px" placeholder="请输入引文DOI"/>
    <el-button @click="search">搜索</el-button>
  </div>
  <br>
  <hr>
  <div v-if="quotation.doi" style="margin-top: 20px">
    <el-form label-width="100px" style="max-width: 600px;min-width: 400px;margin-left: 20px">
      <el-form-item label="标题">
        <el-input v-model="quotation.title" placeholder="请输入引文标题"/>
      </el-form-item>
      <el-form-item label="DOI">
        <el-input v-model="quotation.doi" placeholder="请输入引文DOI"/>
      </el-form-item>
      <el-form-item label="页码">
        <el-input v-model="quotation.page" placeholder="请输入引文页码"/>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker v-model="quotation.date" type="date" placeholder="请选择出版日期" style="width: 100%"/>
      </el-form-item>
      <author-list-component v-model="quotation.authors"/>
      <br>
      <el-button @click="update" style="float: right">确认修改</el-button>
    </el-form>
  </div>
</template>

<script setup>
import {ref, onMounted, provide} from "vue";
import {getDtoByDoi, updateQuotationApi} from "@/apis/quotation";
import {ElMessage} from "element-plus";
import AuthorListComponent from "@/components/add/document/author/AuthorListComponent.vue";

const quotation = ref({})
const doi = ref('')

onMounted(() => {
  doi.value = localStorage.getItem('edit_quotation_doi')
  if (doi.value) {
    search()
    localStorage.removeItem('edit_quotation_doi')
  }
})

provide('doc', {})

const search = () => {
  if (doi?.value?.trim()) {
    getDtoByDoi(doi.value.trim()).then(resp => {
      if (resp.data.code === 200 && resp.data.data?.id) {
        quotation.value = resp.data.data
        console.log(quotation.value)
      } else {
        quotation.value = {}
        ElMessage.info('搜索不到对应的引文')
      }
    })
  } else {
    ElMessage.error('请输入查询关键词')
  }
}

const update = () => {
  console.log(quotation.value)
  updateQuotationApi(quotation.value).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success('修改成功')
      quotation.value = {}
    } else {
      ElMessage.error(resp.data.msg)
    }
  })
}
</script>

<style scoped>

</style>